<script setup>

const activeIndex = ref(0)
const checked = ref(false)
const showError = ref(false)
function changeTab(index) {
  if (index - activeIndex.value > 1) return
  if (!checked.value && index == 1) {
    ElMessage({
      message: '请勾选已完成阅读',
      type: 'warning',
    })
    return showError.value = true
  }
  activeIndex.value = index
}
function changeOnRead(value) {
  console.log({ value });
  checked.value = value
  if (value) {
    showError.value = false
  }
}
const form = reactive({
  name: '',
  phone: '',
  email: '',
  type: 1
})
const fileList = ref([])
const dialogImageUrl = ref('')
const radio = ref(3)
const dialogVisible = ref(false)
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
function changeType(value) {
  console.log({value})
  form.type = value
}
const router = useRouter()
</script>
<template>
  <div class="p-20px rounded-10px bg-white">
    <commonTitle :title="`报名项目: 报名项目：山东科技大学所持一种快速展开式可折叠架子鼓支架及其使用方法专利权转让`"></commonTitle>
    <div class="h-3px  my-10px bg-#FFEDED "></div>
    <ul class="flex">
      <li class="menu-item " :class="{ active: activeIndex === 0 }" @click="changeTab(0)">
        <div class="menu-item-text text-center">
          第一步: 受让申请与承诺
        </div>
      </li>
      <li class="menu-item " :class="{ active: activeIndex === 1 }" @click="changeTab(1)">
        <div class="menu-item-text text-center">
          第二步: 填写报名信息
        </div>
      </li>
      <li class="menu-item " :class="{ active: activeIndex === 2 }" @click="changeTab(2)">
        <div class="menu-item-text text-center">
          第三步: 报名完成等待审核
        </div>
      </li>
    </ul>

    <div class="content">
      <div class="content-1" v-show="activeIndex === 0">
        <div class="mt-10px">
          <div class="text-center text-18px text-#333 font-550 my-20px">资产受让须知与承诺</div>
          <p class="lh-40px! text-#333">
            特别提示该《资产受让须知与承诺》仅适用于交易方式为网络竞价或的本报价的资产转让项目。如本项目转让方或挂牌公告对以下条款有不同约走的，从其约定 且报名，即表明已阅读并接收以下全部案款。
            本项目《资产受让须知与承诺》(以下简称"《须知》 《山东产权交易中心竟价现场管理规走(暂行)》、 ”)依据《山东产权交易中
            山东产权交易中心网络竟价实施办法》和《山东产权交易中心动态报价实施办法》制定，适用于交易方式我动态报价的资产转让项目。
            本项目通过转让公告(以下所指公告均以山东产权交易中心网站ww,sdcaiycom披電内容为准)披露的交易立式确定受让方，本次网络竟价活动(含动态报价
            由山东产权交易中心(以下简称“中心")组织实施，公告期满后，只产生一个符合条件的意向受让方的,中心采取协议方式组织交易:产生两个及以上符合条件的意向旁
            让方的，中心采取竟价方式组织交易，三、参加本项目网络竟价(含动态报价)的竟买人(已交纳本项目保证金并经中心审核通过的意问受让方)，应已了解并道守《山东产权交易中
            心资产交是规则?《山东产权交易中心竞价现场管理规定(暂行)》、《山东产权交易中心网络竞价实施办法》和《山东产权交易中心动态报价实施办法》的规走，认真阅读了本“须知》并
            承诺接受其全部内容，对网络竟价(含动态报价)的交易方式和规则已全面了解，接受中心采取网络竟价(含动态报价)方式组织本次交易，自豆参加本项目网络竟价了会
            动态报价)活动，规范竟买行为，履行竟买义务，按规走参与报价程序四、意向受让方应按公告要求的有效报名时间段内自行登陆中心网站或委托中心会员办理报名登记手续，并技照公告的提示提交报名材的，视为放弃受让资格。五、意向受让方应于挂牌截止日17时前交纳本项目保证金到中心指定账户(以系统保证金支付状态为已支付为准)，保证金未按规定时间到咪的，视为故弃受
          </p>

          <p class="lh-40px! text-#333">
            交易方式为网络竟价或动态报价的项目，一经报名即生成一条未生效的竟价记录，报价价格为挂牌价格。该记录将于满足以下条件后生效:<br />
            1.报名信息审核通过:<br />
            2.保证金最先交纳;<br />
            3.规定报价时间内无人报价。<br />
          </p>
          <div class="flex items-center">
            <el-checkbox size="large" label="已阅读受让申请与承诺(请阅读全文后勾选)" @change="changeOnRead"></el-checkbox>
            <span class="error text-red ml-10px pb-2px" v-if="!checked && showError">请阅读全文后勾选</span>
          </div>
          <div class="read-btn">请仔细阅读受让申请与承诺</div>
          <div class="flex justify-end">
            <el-button type="text" @click="changeTab(1)">下一步</el-button>
          </div>
        </div>
      </div>
      <!-- 购买表单 -->
      <div class="content-1" v-show="activeIndex === 1">
        <el-form :model="form" ref="formRef" size="large" label-width="130px">
          <div class="form" >
            <div class="text-18px text-#000">申请人基本信息</div>
            <el-row :gutter="10" class="mt-10px">
              <el-col :span="4">
                <el-form-item label="客户类型">
                  企业
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称">
                  郑州后顾无忧科技有限公司
                </el-form-item></el-col>
              <el-col :span="6">
                <el-form-item label="保证金金额(万元)">
                  5
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保证金缴纳方式">
                  银行转账或其他
                </el-form-item></el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="联系人姓名" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人电话">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人邮箱">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="保证金缴纳方式" prop="type">
                    <el-radio-group v-model="form.type">
                      <el-radio :value="1">银行转账</el-radio>
                      <el-radio :value="2">其他</el-radio>
                    </el-radio-group>
                  </el-form-item>
               
              </el-col>
            </el-row>
          </div>

          <div class="mt-20px bg-#FBFBFB py-10px px-20px">
            <div class="text-18px text-#000">需提交的材料</div>
            <el-form-item label="二代身份证(正反面)">
              <el-upload :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture-card" action=""
                multiple :limit="2" :file-list="fileList" :auto-upload="false">
                <img src="/img/transactions/id_card.png" alt="">
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div class="flex justify-around mt-20px">
          <div class="submit">提交报名信息</div>
          <div class="saveForm">暂存报名信息</div>
        </div>
      </div>
      <div class="content-3" v-show="activeIndex === 2">
        <el-result icon="success" title="报名信息已提交" sub-title="请等待审核">
          <template #extra>
            <el-button type="primary" @click="router.back()">返回</el-button>
          </template>
        </el-result>
      </div>
    </div>
    <el-dialog v-model="dialogVisible">
      <img class="w-full" :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.menu-item {
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
  background: #FFF8F8;
  // color: #7F0102;
  cursor: pointer;
  font-size: 13px;

  &.active {
    background: #7F0102;
    color: #ffffff;
  }
}

::v-deep(.content) {
  .el-checkbox__label {
    font-size: 16px;
  }

  .el-checkbox.el-checkbox--large .el-checkbox__inner {
    width: 18px;
    height: 18px;
    border-radius: 2px;
  }

  .el-checkbox__inner::after {
    height: 10px;
    left: 6px;
    width: 4px;
  }

  .form {
    margin-top: 20px;
    padding: 10px 20px;
    background: #FBFBFB;
  }
}

.read-btn {
  margin: auto;
  width: 184px;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(96deg, #7F0102 0%, #FF4848 100%);
  border-radius: 10px 10px 10px 10px;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: #FFFFFF;
  font-style: normal;
}

.submit,
.saveForm {
  width: 184px;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(96deg, #7F0102 0%, #FF4848 100%);
  border-radius: 10px 10px 10px 10px;
  color: #FFFFFF;
  cursor: pointer;
  text-align: center;
}

.saveForm {
  background: #ffffff;
  color: #7F0102;
  border: 1px solid #7F0102;
}
</style>